<template>
  <!-- type表示类型 -->
  <FilmList :key="'film' + list.length" :type="nowplaying" :list="list" ></FilmList>
  </template>
  
  <script setup lang='ts'>
  import { onMounted, ref } from "vue";
  import { nowPlayingListData } from "@/api/api";
  import FilmList from "../components/FimList.vue"
  // // 定义演员的类型接口
  // interface ActorType {
  //     name: string
  // }
  // // 定义电影列表的类型接口
  // interface ListType {
  //     filmId: number;
  //     name: string;
  //     poster: string;
  //     nation: string;
  //     runtime: string;
  //     actors: ActorType[];
  //     grade: string;
  // }
// 导入电影列表的相关关键属性数据
  import { ListType } from "../types/index"
  // 分页数据
  const page = ref<string>("1");
  // 当前类型  正在热映，不需要做成响应式的监听数据
  const nowplaying = 1;
  // 显示电影列表信息数据
  let list = ref<Array<ListType>>([]);
  onMounted(async () => {
    const ret = await nowPlayingListData(page.value);
    list.value = ret.data.films;
    console.log(list.value);
  
  })
  </script>
  
  <style scoped lang='scss'>
  
  </style>